<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>canvasarc</title>
    <script type="text/javascript">
            window.onload=function () {
                var can=document.getElementById("macanvas");
                var con=can.getContext("2d");
                con.fillStyle="#f1f2f3";
                con.fillRect(0,0,300,300);
                for (icv=1;icv<10;icv++){
                    con.beginPath();
                    con.arc(20*icv,20*icv,10*icv,0,Math.PI*2,true);
                    con.closePath();
                    con.fillStyle="rgba(255,0,0,0.25)";
                    con.fill();
                    con.strokeStyle="#f00";
                    con.stroke();
                }
            }
    </script>
</head>
<body>
<canvas id="macanvas" width="300px" height="300px"></canvas>
</body>
</html>